<template>
  <!-- <div>
    <div>{{post.content}}</div>
    <span>"发帖人:"</span>
    <span>{{post.name}}</span>
    <img :src="'/avatar/'+post.avatar" :alt="post.name" width=50 height=50>
    <span>{{date}}</span>
    <ul>
      <li v-for="comment in comments" :key="comment.id">
        <span>{{comment.content}}------</span>
        <span>评论人:{{comment.name}}</span>
      </li>
    </ul>
    <form >
      <textarea  cols="30" rows="10" v-model="newComment"></textarea>
      <button @click.prevent="submitForm">提交评论</button>
    </form>
  </div>  -->
  <div>

    <div class="container">
      <h3>{{post.title}}</h3>
      <div class="content">   
        <div>
          <img :src="'/avatar/' + post.avatar" alt="">
          <span>{{post.name}}</span>
        </div>   
        <p class="lead">{{post.content}}</p>
      </div>

      <div v-for="comment in comments" :key="comment.id">
        <div>
          <img :src="'/avatar/' + comment.avatar" alt="">
          <span>{{comment.name}}</span>
        </div>
        <p>{{comment.content}}</p>
      </div>

      <form class="container-fluid">
        <textarea  class="form-control" rows="3" v-model="newComment" placeholder="提交一条新回复"></textarea>
        <br>
        <button class="btn btn-default" @click.prevent="submitForm">回复</button>
      </form>

    </div>
    
    <div class="sider">

      <table class="table">

        <thead>
          <tr>
            <th>作者的最新帖子</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="post in posts" :key="post.id">
            <td>
              <router-link :to="'/posts/'+post.id" >{{post.title}}</router-link>
            </td>
          </tr>

        </tbody>

      </table>
    </div>
    
    <footer>
      &copy;欢迎访问
      <br>
      ♥ Never say die
    </footer>

  
  </div>
  
  
  

</template>

<script>
export default {
  data(){
      return{
        post:"",
        comments:[],
        newComment:"",
        posts:[],
      }
    },
  computed:{
    date(){
      let date = new Date(this.post.timestamp)
      let month = date.getMonth() + 1 + "-"
      let day = date.getDate() + " "
      let hour = date.getHours() + ":"
      let minute = date.getMinutes()
      return month + day + hour + minute
    } 
  },
  watch:{
    async $route(){
      let res = await this.$http.get("/api/posts/"+this.$route.params.postId)
      this.comments = res.data.comments
      this.post = res.data.post
      this.posts = res.data.posts
    }

  },

  async beforeCreate(){
    let res = await this.$http.get("/api/posts/"+this.$route.params.postId)
    this.comments = res.data.comments
    this.post = res.data.post
    this.posts = res.data.posts
  },

  methods:{
    async submitForm(){
      try{
        console.log("发送发表评论请求")
        await this.$http.post("/api/addComment",{
          newComment:this.newComment,
          postId: this.post.id,
        })
        let response = await this.$http.get("/api/posts/"+this.$route.params.postId)
        this.comments = response.data.comments       
      } catch(e){          
        alert("未登录 没有权限评论")
      }
    }
  }
}
</script>

<style scoped>
  .container{
    width: 70%;
    float: left;
  }
  .container>div{
    border-top: 2px solid #e2e2e2;
  }
  .container>div:last-of-type{
    border-bottom: 2px solid #e2e2e2;
    margin-bottom: 40px;
  }
  .container img{
    border-radius: 999px;
    width: 45px;
    height: 45px;
    margin-right: 10px;
  }

  .sider{
    width: 20% ;
    float: right;
    margin-top: 50px;
    margin-right: 20px;
  }
  
  .sider a{
    color: black;
  }
  .sider tr:last-of-type{
    border-bottom: 1px solid #ddd;
  }
  
  footer{
    margin: 20px;
    clear: both;
  }

  @media (max-width: 400px){
    footer{
      display: none;
    }
  }

</style>
